<template>
	<view>
		<w-navbar type="normal" background="linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%)">
			<view slot="navbar-center">选择框</view>
		</w-navbar>

		<pageDemoBlock title="基本用法(单选用法)" color="#1c87e4">
			<view class="p-2">
				<w-selectionBoxGroup v-model="selectionBoxGroup1.group">
					<w-selectionBox :value="item.value" v-for="(item,index) in selectionBoxGroup1.arr" :key="index">
						{{item.label}}
					</w-selectionBox>
				</w-selectionBoxGroup>
			</view>
			<view class="p-2">
				<w-selectionBoxGroup v-model="selectionBoxGroup1.group">
					<w-selectionBox shape="round" :value="item.value" v-for="(item,index) in selectionBoxGroup1.arr"
						:key="index">
						{{item.label}}
					</w-selectionBox>
				</w-selectionBoxGroup>
			</view>
		</pageDemoBlock>

		<pageDemoBlock title="基本用法(多选用法)" color="#1c87e4">
			<view class="p-2">
				<w-selectionBoxGroup v-model="selectionBoxGroup2.group">
					<w-selectionBox :value="item.value" v-for="(item,index) in selectionBoxGroup2.arr" :key="index">
						{{item.label}}
					</w-selectionBox>
				</w-selectionBoxGroup>
			</view>
			<view class="p-2">
				<w-selectionBoxGroup v-model="selectionBoxGroup2.group">
					<w-selectionBox shape="round" :value="item.value" v-for="(item,index) in selectionBoxGroup2.arr"
						:key="index">
						{{item.label}}
					</w-selectionBox>
				</w-selectionBoxGroup>
			</view>
		</pageDemoBlock>

		<pageDemoBlock title="自定义颜色/大小/图标/背景色" color="#1c87e4">
			<view class="p-2">
				<w-selectionBoxGroup v-model="selectionBoxGroup3.group">
					<w-selectionBox icon-size="50" iconColorDefault="#ccc" backgroundActive="#fff"
						iconColorActive="#000" icon="icon-icon_TikTok-square" :value="item.value"
						v-for="(item,index) in selectionBoxGroup3.arr" :key="index">
						{{item.label}}
					</w-selectionBox>
				</w-selectionBoxGroup>
			</view>
			<view class="p-2">
				<w-selectionBoxGroup v-model="selectionBoxGroup3.group">
					<w-selectionBox icon-size="50" backgroundActive="#fff"  iconColorDefault="#ccc"
						iconColorActive="#36df02" icon="icon-icon_wechat-square" :value="item.value"
						v-for="(item,index) in selectionBoxGroup3.arr" :key="index">
						{{item.label}}
					</w-selectionBox>
				</w-selectionBoxGroup>
			</view>
		</pageDemoBlock>
	</view>
</template>


<script>
	import pageDemoBlock from '@/components/page-demo-block';
	export default {
		components: {
			pageDemoBlock
		},
		data() {
			return {
				selectionBoxGroup1: {
					group: 'check1',
					arr: [{
							label: '选项一',
							value: 'check1'
						},
						{
							label: '选项二',
							value: 'check2'
						},
						{
							label: '选项三',
							value: 'check3'
						}
					]
				},
				selectionBoxGroup2: {
					group: ['check1'],
					arr: [{
							label: '选项一',
							value: 'check1'
						},
						{
							label: '选项二',
							value: 'check2'
						},
						{
							label: '选项三',
							value: 'check3'
						}
					]
				},
				selectionBoxGroup3: {
					group: ['check1'],
					arr: [{
							label: '选项一',
							value: 'check1'
						},
						{
							label: '选项二',
							value: 'check2'
						},
						{
							label: '选项三',
							value: 'check3'
						}
					]
				}

			};
		},
		methods: {

		}
	};
</script>

<style lang="scss">

</style>
